// categories is a variable containing all the category available in the database
//var category_preference = new Array ();

// category object
function category (category_id, category_name) {
	this.category_id = category_id;
	this.category_name = category_name;
}

// category sorting function
function sort_cat(a,b) {
	return a.category_name > b.category_name;
}

// check whether a sub category is alr in the sub category preference.
// return true if alr existed, and false otherwise.
function exist_category(cat) {
	var flag = false;
	for (var i=0; i < category_preference.length; ++i) {
		if (category_preference[i].category_id == cat.category_id) {
			flag = true;
			break;
		}
	}
	return flag;
}

// add new category
function add_category() {
	var chosen_cat = document.getElementById("choose_category");
	var new_category = new category (categories[chosen_cat.value-1].category_id,
											 categories[chosen_cat.value-1].category_name);
	
	if (exist_category(new_category) == false) {
		category_preference.push(new_category);
		category_preference.sort(sort_cat);
		display_category();
	}
	
	update_category();
}

// display the sub category  container
function display_category() {
	var category_container = document.getElementById("category_container");
	
	while (category_container.hasChildNodes()) {
		category_container.removeChild(category_container.lastChild);
	}
	
	for (var i=0; i < category_preference.length; ++i) {
		var newdiv = document.createElement('div');
		newdiv.setAttribute('id','category_' + category_preference[i].category_id);
		
		var cancel = document.createElement('a');
		cancel.setAttribute('href','Javascript:void(0);');
		cancel.setAttribute('id','cancel_'+i);
		cancel.setAttribute('onclick','remove_category(' + category_preference[i].category_id + ')');
		cancel.innerHTML = "Remove";
		newdiv.appendChild(cancel);
		
		var text = document.createElement('span');
		text.setAttribute('class', 'normal-text');
		text.innerHTML = "&nbsp-- " + category_preference[i].category_name;
		newdiv.appendChild(text);
		
		
		var text = document.createElement('span');
		text.setAttribute('class', 'normal-text');
		text.innerHTML = "&nbsp-- " + category_preference[i].category_name;
		newdiv.appendChild(text);
		
		category_container.appendChild(newdiv);
	}
}


// remove the corresponding category when a cancel is click
function remove_category(no) {
	var category_container = document.getElementById("category_container");
	var category = document.getElementById('category_' + no);
	
	for (var i=0; i < category_preference.length; ++i) {
		if (category_preference[i].category_id == no) {
			category_preference.splice(i,1);
			break;
		}
	}
	category_container.removeChild(category);
	update_category();
}

// Update the category list input form to send to the sever;
function update_category(){
	var category_list = document.getElementById("category_list");

	category_list.value = category_array_to_string(category_preference);
}

// Convert an array of category to string (only keep the category_id)
function category_array_to_string(a){
	var str = "[" ;
	
	for (var i=0; i < a.length-1; ++i) {
		str += '{"category_id":"' + a[i].category_id + '"},' ;
	}
	if (a.length > 0) {
		str += '{"category_id":"' + a[a.length-1].category_id + '"}' ;
	}
	str += "]";
	
	return str;
}

$(function() {
	display_category();
	update_category();
});